<template>
  <page-wrap>
    <div class="signorder-container">
      <div class="signorder-container-header">
        {{ dayjs().format('YYYY-MM-DD') }}
        {{ dayjs().format('HH:mm:ss') }}
      </div>
      <div class="signorder-container-main">
        <div class="signorder-main-select" @click="signShow = true">
          <div class="select-title">赠送人：</div>
          <div class="select-value">
            {{ signText }}
            <div class="select-icon"></div>
          </div>
        </div>
        <div class="signorder-main-center">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadData"
            :immediate-check="false"
            offset="100"
          >
            <div
              class="main-center-item"
              v-for="(item, index) in signRecordList"
              :key="index"
            >
              <div class="item-header">
                <div class="item-header-left">
                  <div class="header-left-title">
                    赠送人：{{ item.userName }}
                  </div>
                </div>
                <div class="item-header-right">
                  <div class="header-right-title">赠送金额：</div>
                  <div class="header-right-value">{{ item.signMoney }}</div>
                </div>
              </div>

              <ul class="item-main">
                <li
                  class="item-main-id"
                  @click="toOrderdetails(item.consumeCode)"
                >
                  <span class="main-id-title">订单号：</span>
                  <span class="main-id-value">{{ item.consumeCode }}</span>
                </li>
                <li class="item-main-table">
                  <span class="main-table-title">{{ item.roomName }}</span>
                </li>
                <li class="item-main-price">
                  <span class="main-price-title">订单金额：</span>
                  <span class="main-price-value">{{ item.signMoney }}</span>
                </li>
                <li class="item-main-time">
                  <span class="main-time-title">赠送时间：</span>
                  <span class="main-time-value"
                    >{{ dayjs(item.signDate).format('YYYY-MM-DD') }}
                    {{ dayjs(item.signDate).format('HH:mm:ss') }}</span
                  >
                </li>
              </ul>
            </div>
          </van-list>
        </div>
      </div>
    </div>
  </page-wrap>
  <z-picker
    v-model:show="signShow"
    :columns="waiterColumns"
    title="赠送人"
    @confirm="onConfirm($event, 'waiterUser')"
  />
</template>

<script setup>
import dayjs from 'dayjs'
import Api from '@/api'
const router = useRouter()
// 数据数组
const signRecordList = ref([])
// 签收人（服务员）选项组
const waiterColumns = ref([{ text: '全部', value: -1 }])
// 弹窗确定按钮
const onConfirm = function (ev, type) {
  const opt = ev.selectedOptions ? ev.selectedOptions[0] : null
  if (opt.text === '全部') {
    postForm.userCode = ''
  } else {
    postForm.userCode = opt.userCode
  }
  signText.value = opt.text
  signShow.value = false
  loadData(true)
}
const signText = ref('全部')
const signShow = ref(false)
// 跳转到订单详情
const toOrderdetails = val => {
  router.push({
    path: `/statistics/orderdetails`,
    query: { orderBatchCode: val }
  })
}
//表单
const postForm = reactive({
  userCode: '',
  pageIndex: 1,
  pageSize: 15
})
// ---------------------------------------加载----------------------------------------------
const loading = ref(false)
const finished = ref(false)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    finished.value = false
    postForm.pageIndex = 1
    signRecordList.value = []
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'getSignRecordList',
    contentData: postForm
  })
  const nowList = resp.result
  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  Array.prototype.push.apply(signRecordList.value, nowList)
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
}
// --------------------------------------------------------------初始化-------------------------------------------------
const onInit = () => {
  // 获取服务员信息
  Api.Common.AppObjProcess.Do({
    functionName: 'getWaiterList',
    contentData: {}
  })
    .then(res => {
      const DepotList = res.result
      // 改造数组 添加picker需要的text和value
      let modifiedObjArr = DepotList.map(obj => {
        return { ...obj, text: obj.userName, value: obj.userCode }
      })
      Array.prototype.push.apply(waiterColumns.value, modifiedObjArr)
    })
    .catch(err => {
    })
  loadData(true)
}
onInit()
</script>

<style scoped lang="scss">
.signorder-container {
  .signorder-container-header {
    line-height: 12px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #cccccc;
    padding: 10px 12px;
    text-align: right;
    background: #121214;
  }
  .signorder-container-main {
    padding: 0 12px;
    .signorder-main-select {
      display: flex;
      align-items: center;
      padding: 12px 0;

      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;

      line-height: 16px;
      .select-title {
        color: #ffffff;
      }
      .select-value {
        color: #ffaa00;
        position: relative;
        .select-icon {
          position: absolute;
          width: 11px;
          height: 6px;
          background-image: url('@/assets/svg/common/v_triangle_bottom_white.svg');
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center center;
          right: -14px;
          top: 5px;
        }
      }
    }
    .signorder-main-center {
      .main-center-item {
        background: #28282e;
        border-radius: 8px;
        margin-bottom: 10px;
        .item-header {
          padding: 16px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px solid #383840;
          .item-header-left {
            .header-left-title {
              font-size: 18px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 18px;
            }
          }
          .item-header-right {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            line-height: 14px;
            display: flex;
            align-items: center;
            .header-right-title {
              color: #cccccc;
            }
            .header-right-value {
              color: #ffaa00;
            }
          }
        }
        .item-main {
          padding: 12px 24px;
          .item-main-id {
            display: flex;
            align-items: center;
            padding-bottom: 12px;
            font-size: 13px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #cccccc;
            line-height: 13px;
            .main-id-title {
            }
            .main-id-value {
            }
          }
          .item-main-table {
            padding-bottom: 16px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 18px;
            .main-table-title {
            }
          }
          .item-main-price {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            padding-bottom: 12px;
            line-height: 14px;
            .main-price-title {
              color: #cccccc;
            }
            .main-price-value {
              color: #ffffff;
            }
          }
          .item-main-time {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            padding-bottom: 8px;
            line-height: 14px;
            .main-time-title {
              color: #cccccc;
            }
            .main-time-value {
              color: #ffffff;
            }
          }
        }
      }
    }
  }
}
</style>
